<template>
  <div class="plan">
    <ul class="plan-title">
      <li class="tab-title" v-for="item of titleList" :key="item.id">{{item.name}}</li>
    </ul>
    
    <ul class="plan-table">
        <li class="tab-border" v-for="item of tableList"></li>
    </ul> 

    <ul class="plan-data">
       <li class="tab-content">{{list.monthYield}}</li>
       <li class="tab-content">{{list.yearYield}}</li>
       <li class="tab-content">{{list.dayYield}}</li>
       <li class="tab-content">{{list.reachRate}}</li>
    </ul>

            
  </div>
</template>
<script>
export default {
  props:{
    list:Object
  },
  data () {
    return {
       titleList:[
          {
             name:"月计划数量",
             id:"0001"
          },
          {
             name:"年计划数量",
             id:"0002"
          },
          {
             name:"日计划数量",
             id:"0003"
          },
          {
             name:"达成率",
             id:"0004"
          }
        ],
        tableList:["1","2","3","4"]
    }
  }
}
</script>
<style  scoped>
.plan{
  position:relative
}  
.plan-title{
  width:100%;
  height:44px;
  border:1px solid #26aab7;
  box-sizing:border-box;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab-title{
    height:44px;
    width:25%;
    border-right: 1px solid #26aab7;
    line-height:44px;
    text-align:center;
    font-size:30px;
    color:#fff;
}    
.tab-title:last-child{
   border:none;
}
      
.plan-table{
    width:100%;
    height:44px;
    box-sizing:border-box;
    border-left: 1px solid #26aab7;
    border-right: 1px solid #26aab7;
    border-bottom: 1px solid #26aab7;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px ;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.tab-border{
   height:44px;
   width:25%;
   border-right:1px solid #26aab7;
}
 
.tab-border:last-child{
  border:none;
}


.plan-data{
  position:absolute;
  top:44px;
  /*background:rgba(255,255,255,.4);*/
  width:100%;
  height:44px;
  box-sizing:border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    
.tab-content{
   height:44px;
  width:25%;
  line-height:44px;
  text-align:center;
  font-size:24px;
  color:#26aab7 ;
}
 
</style>